<template>
	<view>
		<view class="header">
			<view class="empty">
			</view>
			<view class="back" style="width: 30px;" @click="back">
				<uni-icons type="back" size="24" color="#155915"></uni-icons>
			</view>
			<view class="submitTitle">
				发表文章
			</view>
			<!-- <view class="submitBtn" @click="send">
				发表
			</view> -->
		</view>
		<view class="editContent">
			<ksp-editor ref="editor" @selectImage="selectImage" @save="onsave" :list="list" v-model="passageContent">
			</ksp-editor>
		</view>

	</view>
</template>

<script>
	// import textImageVideoEditor from '../../components/yyc-easy-editor/index.vue'

	import kspEditor from "@/components/ksp-editor/ksp-editor.vue"

	export default {
		components: {
	
			kspEditor
		},
		data() {
			return {
		
				// 
				list: [{
					type: "text",
					content: "标题"
				}, {
					type: "image",
					url: "/static/bannerA.webp"
				}, {
					type: "text",
					content: ''
				}],
				passageContent: ''
			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: '../tabbar/follow/follow'
				})
			},
			
			


			// 
			selectImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						var path = res.tempFilePaths[0];
						// 实际项目中应上传图片到服务一起，获取url后再添加
						this.$refs.editor.addImage(path);
					}
				})
			},
			onsave(ev) {
				console.log(ev.result);
			},

			//调用函数
			setUpdaPassage() {
			this.$api.updatePassage(list).then((res)=>{
				console.log(res);
			})
			},

			// 上传
			send() {
				console.log("发送成功");
				this.setUpdaPassage({
					content:this.list
				})

			}

		}
	}
</script>

<style lang="scss">
	.header {
		display: flex;

		height: 40px;
		padding: 15px;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		border-bottom: 1px solid #f5f5f5;
		z-index: 80;

		// background: #ebebeb;
		.submitTitle {
			position: fixed;
			top: 30px;
			left: 38%;
			font-size: 20px;
			font-weight: 800;
			color: $mk-base-color;
			z-index: 90;
		}

		.submitBtn {
			position: fixed;
			right: 4%;
			width: 60px;
			text-align: center;
			color: $mk-base-color;
			font-size: 16px;
			font-weight: 400;
			height: 25px;
			border-radius: 30px;
			padding-top: 4px;
			// background: $mk-base-color;
			// box-shadow: #b9b9b9 2px;
			box-shadow: 3px 3px 10px rgb(212, 212, 212);
			z-index: 90;
		}

		.back {
			position: fixed;
			left: 4%;
			z-index: 90;
		}

		.empty {
			position: fixed;
			right: 0;
			top: 0;
			width: 100%;
			// width: 50px;
			height: 70px;
			background: #ffffff;
			z-index: 80;
		}

	}

	.editContent {

		margin-top: 20%;
		margin: 10px;

		.inputContent {
			height: 800px;

		}
	}
</style>
